<template>
    <el-amap :class="editState?'amap-box-edit':'amap-box-add'" vid="amap" :events="events" :center="center" :zoom="zoom">
        <el-amap-marker vid="amap-marker" :position="position" v-if="position[0]" />
        <el-amap-circle :center="position" v-if="position[0]"
                        :radius="radius"
                        :strokeWeight="1"
                        :strokeColor="'#028bfa'"
                        :fill-color="'#028bfa'"
                        :fill-opacity="0.6" />
        <el-amap-marker vid="amap-marker" v-for="item in markers" :index="item.equipmentId+''" :position="[item.positionLng,item.positionLat]" />
        <el-amap-circle v-for="(item,index) in markers" :key="'circle_' + item.equipmentId" v-if="item.enable"
                        :center="[item.positionLng,item.positionLat]"
                        :radius="item.radius"
                        :strokeWeight="1"
                        :strokeColor="'#a0cff6'"
                        :fill-color="'#a0cff6'"
                        :fill-opacity="0.6" />
    </el-amap>
</template>

<script>
import {mapState} from "vuex";

export default {
    name: "MapSearch",
    props: {
        selectIndex: {
            default: 0,
            require: false
        },
        editState: {
            require: true
        },
        area: {
            require: true
        },
        radius: {
            require: false,
            default: function (){
                return 100
            }
        },
        paramPosition: {
            require: false,
            default: function (){
                return []
            }
        }
    },
    data() {
        const _this = this;
        return {
            position: [],                               //定位
            center: [104.06584, 30.65787],              //地图初始化视图中心点(默认成都市)
            markers: [],                                //同地区下的其他设备
            zoom: 12,                                   //地图缩放比例
            plugin: [                                   //这里放扩展的插件
                'AMap.Autocomplete',
                'AMap.PlaceSearch'
            ],
            events: {
                click(e) {
                    if (_this.area) {
                        //获取点击坐标
                        const {lng, lat} = e.lnglat;
                        _this.position = [lng, lat];
                        //将子组件的data返还到父组件
                        _this.$emit('getPosition', _this.position);
                        //将中心定为选中位置
                        _this.center = [lng, lat];
                    }
                }
            }
        }
    },
    computed: {
        ...mapState({
            equipmentData: state => state.active.equipmentData,
            areaData: state => state.active.areaData
        })
    },
    methods: {
        setCenterByArea(area) {
            if(area){
                //如果这个区域有部署设备,则中心点设置成该设备
                let thisAreaEquipments = this.getEquipmentsByArea(area);
                if(thisAreaEquipments.length > 0){
                    this.center = [thisAreaEquipments[0].positionLng,thisAreaEquipments[0].positionLat];
                }else{
                    //否则中心点设置成地区区政府
                    this.center = [area.areaLng,area.areaLat];
                }
                //顺便将同区域的设备信息放入remarkers中
                this.initRemarkers();
            }
        },
        setCenterByPosition(position){
            if(position[0] && position.length === 2){
                //将地图中心和坐标都设置成position指定的地点
                this.center = position;
                this.position = position;
            }
        },
        initRemarkers() {
            this.markers = [];
            if (this.editState) {
                let selectItem = this.equipmentData.data[this.selectIndex];
                for (let item of this.equipmentData.data) {
                    if ((item.areaId === this.area.areaId) && (item.equipmentId !== selectItem.equipmentId)) {
                        this.markers.push(item);
                    }
                }
            } else {
                for (let item of this.equipmentData.data) {
                    if (item.areaId === this.area.areaId) {
                        this.markers.push(item);
                    }
                }
            }
        },
        getEquipmentsByArea(area){
            let result = [];
            for(let item of this.equipmentData.data){
                if(item.areaId === area.areaId){
                    result.push(item);
                }
            }
            return result;
        },
        initComponentData(){
            //初始化组件参数
            this.center = [104.06584, 30.65787];
            this.position = [];
            this.markers = [];
            this.zoom = 12;
        }
    },
    watch: {
        area(newValue,oldValue) {
            this.setCenterByArea(newValue);
        },
        paramPosition(newValue,oldValue) {
            //只针对value值不为undefined时有处理,反之将组件的center和position数据初始化
            if(newValue[0]){
                //在非首次打开Dialog时,本组件中还留有上次记录的center和position缓存
                //如果以添加模式打开,则paramPosition会变成[],触发watch,清空缓存中的position
                if(!this.editState){
                    this.position = [];
                }else{
                    //如果以编辑模式打开,则paramPosition会变成新坐标,触发watch,将新的坐标放入position和center
                    this.position = newValue;
                    this.center = newValue;
                }
            }else{
                this.initComponentData();
            }
        },
        editState(value){
            if(!value){
                //如果是添加模式
                this.zoom = 12
            }else{
                //如果是编辑模式
                this.zoom = 16
            }
        }
    },
    created() {
        //刷新页面后第一次点开Dialog时的判断
        //以添加模式打开,area参数默认为第一个,paramPosition为[],则只进行通过area设置center,且地图上没有坐标
        if(!this.editState){
            this.setCenterByArea(this.area);
        }else{
            //以编辑模式打开,area参数为选中行的area数据,paramPosition为选中行的坐标数据,因此将position和center都设置成选中的坐标数据
            this.setCenterByPosition(this.paramPosition);
            this.initRemarkers();
        }
    }
}
</script>

<style scoped>
.amap-box-add{
    width: 100%;
    height: 350px;
}

.amap-box-edit{
    width: 100%;
    height: 200px;
}
</style>